import React, { Component } from 'react';
import { View, Image, Text, StyleSheet, ImageBackground, TouchableWithoutFeedback, ScrollView, FlatList } from 'react-native';
import RefreshListView, { RefreshState } from '../../common/components/RefreshListView'
import { connect } from 'react-redux'
import Swpier from 'react-native-swiper'
import { Colors, AppStyles } from '../../style'
import { default as Images } from '../../images'
import { NavigationActions, createAction } from '../../common/utils';
var screenWidth = require('Dimensions').get('window').width;
var screenHeight = require('Dimensions').get('window').height;
const itemWidth = (screenWidth - 30) / 2;

const contain = 10;
let page = 1;
@connect(({ shop }) => ({ shop }))
export default class Home extends Component {

    constructor(props) {
        super(props)
        this.state = {
            refreshState: RefreshState.Idle
        }
    }

    componentDidMount() {
        this.props.dispatch(createAction('shop/shopList')({
            contain: contain,
            page: page
        }))
    }


    render() {
        return (
            <ScrollView>
                <View style={styles.container}>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: 10 }}>
                        <Item source={Images.team} color={Colors.black} text={'团课'} />
                        <Item source={Images.prvClass} color={Colors.orange} text={'私教'} />
                        <Item source={Images.activity} color={Colors.red} text={'活动'} />
                        <Item source={Images.card} color={Colors.yellow} text={'充值'} />
                    </View>
                    <View style={{ width: screenWidth, height: screenWidth * 5 / 16, marginTop: 10 }}>
                        <Swpier style={{ height: screenWidth * 5 / 16, width: screenWidth - 20, borderRadius: 10.0, alignSelf: 'center' }}
                            dot={<View style={{ backgroundColor: Colors.black, width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3 }} />}
                            activeDot={<View style={{ backgroundColor: Colors.orange, width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3 }} />}
                            paginationStyle={{
                                bottom: 5
                            }}
                            autoplay
                        >
                            <Activity source={Images.image1} />
                            <Activity source={Images.image2} />
                            <Activity source={Images.image3} />
                        </Swpier>
                    </View>
                    <View style={{ flex: 1, backgroundColor: Colors.grey }}>
                        <RefreshListView
                            data={this.props.shop.shopList}
                            numColumns={2}
                            onFooterRefresh={this._onFooterRefresh}
                            renderItem={this._renderItem.bind(this)}
                        />
                    </View>
                </View>
            </ScrollView>
        )
    }

    _onFooterRefresh = () => {
        this.setState({
            refreshState: RefreshState.FooterRefreshing
        })
        this.props.dispatch(createAction('shop/shopList')({
            contain: contain,
            page: page+1
        }))
        page = page+1

    }

    _renderItem = ({ item }) => {
        return (
            <TouchableWithoutFeedback onPress={() => {
                this.props.dispatch(NavigationActions.navigate({ routeName: 'ShopDetail' }))
            }}>
                <View style={{
                    width: itemWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                    marginLeft: 10,
                    marginTop: 10,
                    borderRadius: 10,
                    backgroundColor: Colors.white
                }}>
                    <Image source={Images.image1} style={{ width: itemWidth, height: itemWidth * 0.75, borderTopLeftRadius: 10, borderTopRightRadius: 10, }} />
                    <Text style={AppStyles.bigTextStyle}>店铺名</Text>
                    <Image source={Images.star5} style={{ height: 10, width: 60 }} />
                    <View style={{ flexDirection: 'row', marginTop: 5, marginBottom: 10 }}>
                        <Image source={Images.location} style={{ width: 18, height: 18 }} />
                        <Text style={AppStyles.smallTextStyle}>距离</Text>
                    </View>
                </View>
            </TouchableWithoutFeedback>
        )
    }
}

/**
 * source
 * text
 * color
 */
class Item extends Component {
    render() {
        const width = (screenWidth - 5 * 30) / 4
        let { source, text, color } = this.props;
        return (
            <View style={{ alignItems: 'center' }}>
                <View style={{ borderRadius: 5, width: width, height: width, backgroundColor: color || Colors.orange, justifyContent: 'center', alignItems: 'center' }}>
                    <Image style={{ height: width / 2, width: width / 2 }}
                        source={source || Images.team} />
                </View>
                <Text style={AppStyles.mediumTextStyle}>{text || '暂无'}</Text>
            </View>
        )
    }
}

/**
 * source
 * title
 */
class Activity extends Component {
    render() {
        return (
            <TouchableWithoutFeedback style={{ width: screenWidth - 20, height: (screenWidth - 20) * 5 / 16 }}>
                <Image source={this.props.source} style={{ width: screenWidth - 20, height: (screenWidth - 20) * 5 / 16, borderRadius: 10.0, backgroundColor: Colors.orange }} resizeMethod={'scale'} />
            </TouchableWithoutFeedback>
        );
    }
}

class ShopItem extends Component {
    render() {
        return (
            <TouchableWithoutFeedback onPress={() => {
                this.props.dispatch(NavigationActions.navigate({ routeName: 'ShopDetail' }))
            }}>
                <View style={{
                    width: itemWidth,
                    justifyContent: 'center',
                    alignItems: 'center',
                    marginLeft: 10,
                    marginTop: 10,
                    borderRadius: 10,
                    backgroundColor: Colors.white
                }}>
                    <Image source={Images.image1} style={{ width: itemWidth, height: itemWidth * 0.75, borderTopLeftRadius: 10, borderTopRightRadius: 10, }} />
                    <Text style={AppStyles.bigTextStyle}>店铺名</Text>
                    <Image source={Images.star5} style={{ height: 10, width: 60 }} />
                    <View style={{ flexDirection: 'row', marginTop: 5, marginBottom: 10 }}>
                        <Image source={Images.location} style={{ width: 18, height: 18 }} />
                        <Text style={AppStyles.smallTextStyle}>距离</Text>
                    </View>
                </View>
            </TouchableWithoutFeedback>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.grey
    },
    black: {
        width: screenWidth, height: 40,
        borderBottomWidth: 1,
        borderColor: Colors.black
    }
})